<template>
     <el-divider content-position="left">
        <h2> 轮播图管理</h2>
    </el-divider>
    
    <!-- 弹窗组件 -->
    <el-button type="primary" @click="dialogVisible = true">
        点击新增
    </el-button>
    <el-dialog v-model="dialogVisible" title="Tips" width="50%" draggable>
        <!-- <span>tips:</span> -->
        <!-- 表单组件 -->
        <el-form :label-position="`right`" label-width="100px" :model="formInfo">
            <el-form-item label="标题">
                <el-input v-model="formInfo.title" />
            </el-form-item>
            <el-form-item label="链接">
                <el-input v-model="formInfo.href" />
            </el-form-item>
            <el-form-item>
                <!-- <input type="file"> -->
                <!-- 上传文件 -->
                <el-upload class="upload-demo" drag name="photo" :action="options.add" :on-remove="removeFn"
                    :on-success="uploadFn" :data="data" multiple>
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                        拖拽图片到此处 <em>或点击上传</em>
                    </div>
                    <template #tip>
                        <div style="height: 120px; padding: 10px 10px;">
                            <img v-if="picUrl" :src="picUrl" style="height: 120px">
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <!-- 点击发布轮播图 -->
                <el-button type="primary" @click="addBannerFn">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 表格组件 -->
    <el-table :data="tableData.arr" style="width: 100%">
        <el-table-column label="时间" prop="banner_create_time" />
        <el-table-column label="标题" prop="banner_title" />
        <el-table-column label="图片">
            <template #default="scope">
                <img style="width: 120px;" :src="scope.row.banner_picUrl" alt="">
            </template>
        </el-table-column>
        <el-table-column label="链接">
            <template #default="scope">
                <a :href="scope.row.banner_href" target="_blank">链接</a>
            </template>
        </el-table-column>
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="搜索" />
            </template>
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
  
<script lang="ts" setup>
import { reactive, ref ,computed } from 'vue'
import { ElMessage } from 'element-plus';
import { UploadFilled } from '@element-plus/icons-vue'
import { removePhotoFunc, addBannerFunc , listBannerFunc , removeBannerFunc} from '../../api/index'

import { HOST_URL } from '../../config/host'
// 记录处理图片的接口地址
const options = reactive({
    add: `${HOST_URL}/photo/preview`,
})

// 记录图片路径
let picUrl = ref('');

// 记录表单信息
const formInfo = reactive({
    title: '',
    href: '',
})
// 获取图片信息的方法
const uploadFn = (content: any) => {
    // console.log('1.0', content)
    // 设置预览图片的路径
    picUrl.value = content.picUrl;
}

// 删除图片的方法
const removeFn = (content: any) => {
    //  console.log('2.0', content)
    //  console.log('3.0', content.response.picUrl)
    let src = content.response.picUrl;
    if (src) {
        removePhotoFunc({ picUrl: src })
            .then(
                (content: any) => {
                    console.log(content)
                    if (content.code == 200) {
                        picUrl.value = "";
                    }
                }
            )
    }
}

// 获取本地储存的token
let token = localStorage.getItem("AUTO_TOKEN")
let data = reactive({ token })

// 控制弹窗显示和隐藏的
const dialogVisible = ref(false)

// 轮播图的数据
interface Banner {
  banner_create_time: string
  banner_title: string
  banner_href: string,
  banner_picUrl?:string,
  id?:number | string
}
// 接收轮播图列表数据
let tableData: any= reactive({arr:[]})
// 搜索
const search = ref('')

// 编辑
const handleEdit = (index: number, row: Banner) => {
  console.log(index, row)
}
// 删除
const handleDelete = (index: number, row: Banner) => {
  console.log(index, row)
  if(row){
    // 删除轮播图广告
    removeBannerFunc({
        id: row.id
    })
    .then(
        (content: any)=>{
            if(content.code == 200){
                // 删除轮播图广告对应的图片
                removePhotoFunc({picUrl: row.banner_picUrl})
                .then((res:any)=>{
                    console.log(res.msg)
                })
                ElMessage.success(content.msg)
                // 初始化数据
                // 根据索引值删除数组中的数据
                tableData.arr.splice(index,1);
            }
            else {
                ElMessage.error(content.msg)
            }
            
        }
    )
  }
}

// 编写初始化方法
const initFn = async ()=> {
    await listBannerFunc()
    .then(
        (content: any)=>{
            console.log('4.0',content)
            if(content.code == 200){
                // 赋值观察数据变化：
                // 写法1：
                // content.result.forEach((item: any)=>{
                //     // 添加数据
                //     tableData.push(item)
                // })
                // console.log(tableData);
                // 写法2：
                tableData.arr = [...content.result];
            }
        }
    )
    .catch(
        err=>{
            console.log(err)
        }
    )
}
initFn();

// 发布轮播图
const addBannerFn = async () => {
    //发布轮播
    await addBannerFunc({
        banner_picUrl: picUrl.value,
        banner_href: formInfo.href,
        banner_title: formInfo.title
    })
        .then(
            (content: any) => {
                if (content.code == 200) {
                    ElMessage.success(content.msg)
                    // 隐藏弹窗(重置表单信息)
                    dialogVisible.value = false;
                    picUrl.value = "";
                    formInfo.href = "";
                    formInfo.title = "";
                    // 重新获取轮播图数据列表
                    initFn();
                }
                else {
                    ElMessage.error(content.msg)
                }
            }
        )
        .catch(
            err => {
                ElMessage.error(err.msg)
            }
        )
}



</script>

<style>
.el-input__inner {
    height: 40px;
}

.upload-demo {
    width: 100%;
}
</style>